<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格案例</title>
    <style>
        div {
            text-align: center;
            margin: 50px;
        }

        table {
            border: 2px solid rebeccapurple;
            margin: auto;
            width: 500px;

        }

        td, th {
            text-align: center;
            border: 1px solid green;
        }
    </style>
</head>
<body>
<div>
    编号：<input id="id" type="text">
    姓名：<input id="name" type="text">
    性别：<input id="gender" type="text">
    <input id="btn_add" type="button" value="添加">
</div>
<table id="table">
    <caption>学生信息表</caption>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>
    <tr>
        <td>1</td>
        <td>向问天</td>
        <td>男</td>
        <td>
            <a href="javaScript:void(0)" ; onclick="delTr(this);">删除</a>
        </td>
    </tr>
    <tr>
        <td>2</td>
        <td>令狐冲</td>
        <td>男</td>
        <td>
            <a href="javaScript:void(0)" ; onclick="delTr(this);">删除</a>
        </td>
    </tr>
    <tr>
        <td>3</td>
        <td>岳不群</td>
        <td>？</td>
        <td>
            <a href="javaScript:void(0)" ; onclick="delTr(this);">删除</a>
        </td>
    </tr>
</table>
<script>
    /* // 获取添加按钮，绑定单击事件
     document.getElementById("btn_add").onclick = function () {
         //    获取文本框中的内容
         var id = document.getElementById("id").value;
         var name = document.getElementById("name").value;
         var gender = document.getElementById("gender").value;
         //    创建文本节点
         var node_id = document.createTextNode(id);
         var node_name = document.createTextNode(name);
         var node_gender = document.createTextNode(gender);
         //    创建td标签
         var td_id = document.createElement("td");
         //    将文本节点添加到td节点中
         td_id.appendChild(node_id);
         //    创建td标签
         var td_name = document.createElement("td");
         //    将文本节点添加到td节点中
         td_name.appendChild(node_name);
         //    创建td标签
         var td_gender = document.createElement("td");
         //    将文本节点添加到td节点中
         td_gender.appendChild(node_gender);
         //    创建td标签
         var td_a = document.createElement("td");
         //a标签
         var node_a = document.createElement("a");
         node_a.setAttribute("href", "javaScript:void(0)");
         node_a.setAttribute("onclick","delTr(this);");
         var text = document.createTextNode("删除");
         node_a.appendChild(text);
         td_a.appendChild(node_a);
         //创建tr标签
         var tr = document.createElement("tr");
     //    添加字标签
         tr.appendChild(td_id);
         tr.appendChild(td_name);
         tr.appendChild(td_gender);
         tr.appendChild(td_a);
     //    获取table标签
         var table = document.getElementById("table");
     //    tr添加到table
         table.appendChild(tr);
     }*/
    //使用innerHTML实现
    document.getElementById("btn_add").onclick = function () {
        //    获取文本框中的内容
        var id = document.getElementById("id").value;
        var name = document.getElementById("name").value;
        var gender = document.getElementById("gender").value;
        //获取table
        var table = document.getElementById("table");
        table.innerHTML+= "<tr>\n" +
            "        <td>" + id + "</td>\n" +
            "        <td>" + name + "</td>\n" +
            "        <td>" + gender + "</td>\n" +
            "        <td>\n" +
            "            <a href=\"javaScript:void(0)\"; onclick=\"delTr(this);\">删除</a>\n" +
            "        </td>\n" +
            "    </tr>";
    }

    //    删除
    function delTr(obj) {
        var table = obj.parentNode.parentNode.parentNode;
        var tr = obj.parentNode.parentNode;
        table.removeChild(tr);
    }
</script>

</body>
</html>